<template>
	<div class="item-department">
		<ul class="ul-department">
			<li class="li-department animate-itemSlideIn" v-for="item in items" @click="go(item)" v-if="item.departmentType!='outerContact'">
				<dl class="flex-box">
					<dd class="flex-item"><i class="icon-enterpriseAvatar"></i></dd>
					<dd class="flex-item">{{item.departmentName}}</dd>
					<dd class="flex-item"><i class="icon-arrowRight"></i></dd>
				</dl>
			</li>
		</ul>
	</div>
</template>

<script>
export default {

  name: 'item-department',

  props: {
  	items: [Object, Array]
  },

  data () {
    return {

    };
  },

  methods: {
  	go (item) {
  		this.$router.replace({
  			name: 'list', 
  			params: { 
  				departmentId: item.departmentId
  			}
  		});
  	}
  }
};
</script>

<style lang="scss" scoped>
	@import '../../scss/mixin.scss';
	.item-department{
		.ul-department{
			.li-department{
				height: 100px;
				line-height: 100px;
				font-size: 28px;
				-webkit-user-select: none;
  				user-select: none;
				dd:first-child{
					&:after{
						border: none !important;
					}
				}
				&:active{
					background: rgb(243, 243, 243);
				}
			}
		}
	}
</style>